<script setup lang="ts">
import { onMounted, reactive } from 'vue';

import Left from "./components/left.vue";
import Content from "./components/content.vue";
import Right from "./components/right/index.vue";
import { useLayoutStore } from '@/stores/useLayout';
import Preview from './preview.vue';
import { getRequest } from '@/comm/request';
import { getUrlParams } from '@/comm/tooler';

const layoutStore = useLayoutStore()

// const list = reactive([])
onMounted(() => {
  const id = getUrlParams("id");
  if(id){
    layoutStore.init(id);
  }
  
})

const onStage = () => {
  layoutStore.chooseItem({ type: 'stage' })
}

</script>

<template>
  <el-row :gutter="1" class="j-row">
    <el-col :span="3" class="j-col j-left">
      <Left></Left>
    </el-col>
    <el-col :span="16" class="j-col" @click.self="onStage">
      <div class="main" :style="{ background: layoutStore.background }">
        <Content :tasks="layoutStore.list" direction="column"></Content>
      </div>

    </el-col>
    <el-col :span="5" class="j-col j-right">
      <div class="rt">
        <Right></Right>
      </div>
    </el-col>
  </el-row>
  <Preview></Preview>
</template>

<style lang="less" scoped>
.j-left {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.j-right {
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
}

.j-row {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .j-col {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.main {
  padding: 20px;
}

.rt {
  padding: 10px;
}
</style>
